body {
    background: #fff;
}

/* 头部 */

header {
    .header-top {
        display: flex;
        height: 50px;
        justify-content: space-between;
        background: #ff841d;
        .header-top-left {
            color: #fff;
            font-size: 28px;
            padding-top: 10px;
            padding-left: 20px;
        }
        .header-top-content {
            line-height: 50px;
            color: #fff;
            font-size: 22px;
        }
        .header-top-right {
            width: 40px;
            background: url('../images/header_app.png') no-repeat;
            background-size: 30px 30px;
            background-position: 0 12px;
        }
    }
    .header-bottom {
        display: flex;
        height: 50px;
        padding: 0 10px;
        justify-content: center;
        align-items: center;
        .header-bottom-left {
            flex: 1;
            height: 30px;
            margin-right: 10px;
            input {
                width: 100%;
                line-height: 30px;
                font-size: 16px;
                border-radius: 15px;
                padding-left: 20px;
                background: #f1f1f1;
            }
        }
        .search {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60px;
            height: 30px;
            font-size: 16px;
            color: #fff;
            border-radius: 15px;
            background: #ff841d;
        }
    }
}

/* 商品内容 */

.content {
    .content-top {
        display: flex;
        ul {
            width: 100%;
            li {
                min-height: 120px;
                width: 100%;
                border-bottom: 1px solid #ccc;
                padding: 10px;
                position: relative;
                .con-top-img {
                    width: 100px;
                    height: 100px;
                    text-align: center;
                    position: absolute;
                }
                .con-top-text {
                    padding-left: 110px; // padding-right: 10px; 
                    .title {
                        span {
                            color: orange;
                        }
                    }
                    .other {
                        padding-top: 30px;
                        color: #a1a1a1;
                        font-size: 12px;
                        position: relative;
                        .comment {
                            .fa {
                                position: absolute;
                                right: 0;
                                bottom: 1px;
                                text-align: center;
                            }
                        }
                    }
                }
            }
        }
    }
    /* 下一页按钮 */
    .content-bottom {
        padding: 18px 48px;
        background-color: #f2f2f2; 
        tbody {
            tr{
                display: flex;
                justify-content: center;
                align-items: center;
                td{
                    flex: 1;
                }
                td:nth-child(3){
                    display: flex;
                    justify-content: flex-end;
                }
                td:nth-child(2){
                    display: flex;
                    justify-content: center;
                }
                .content-bottom-top>a {
                    width: 84px;
                    height: 34px;
                    text-align: center;
                    background-color: #d4d4d4;
                    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1f1f1), to(#d4d4d4));
                    border-bottom: 1px solid #bababa;
                    box-shadow: 0 0 1px #666;
                    border-radius: 5px;
                    padding-top: 5px;
                }
                td>select {
                    width: 50px;
                    height: 34px;
    
                }
                .content-bottom-bot>a {
                    width: 84px;
                    height: 34px;
                    text-align: center;
                    background-color: #d4d4d4;
                    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1f1f1), to(#d4d4d4));
                    border-bottom: 1px solid #bababa;
                    box-shadow: 0 0 1px #666;
                    border-radius: 5px;
                    padding-top: 5px;
                }
            }  
        }
    }
    /* 二级目录 */
    .nav-er {
        a {
            height: 40px;
            line-height: 40px;
            background-color: #f2f2f2;
            background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ebebeb));
            padding-left: 10px;
            border-bottom: 1px solid #ccc;
        }
    }
}

footer {
    padding-top: 30px;
    background: #f1f1f1;
    .direct {
        display: flex;
        height: 40px;
        justify-content: center;
        a {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            border: 1px solid #ccc;
        }
        .backTop {
            span {
                display: block;
                height: 15px;
                width: 15px;
                background: url("../images/top.jpg");
                background-size: 15px 15px;
            }
        }
    }
    .copyright {
        height: 60px;
        text-align: center;
        font-size: 14px;
        padding-top: 10px;
        p {
            a {
                display: inline;
                color: red;
            }
            span {
                color: #727f86;
            }
        }
        >a {
            color: #727f86;
        }
    }
}